<template>
  <div class="">
    <el-card>
      <el-button type="primary" @click="addCategory">添加</el-button>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" label="序号" width="180" />
        <el-table-column prop="cate_name" label="分类名" />
        <el-table-column prop="big_category.bigcate_name" label="所属大类" />
        <el-table-column prop="address" label="操作" v-slot="{ row }">
          <el-button type="primary" @click="openedit(row)">编辑</el-button>
          <el-button type="danger" @click="delCategory(row)">删除</el-button>
        </el-table-column>
      </el-table>
      <el-pagination
        small
        background
        layout="prev, pager, next"
        :total="total"
        class="mt-4"
        :page-size="pageSize"
        @change="changePage"
        style="display: flex; justify-content: center"
      />
    </el-card>
    <!-- 添加 -->
    <el-dialog
      v-model="centerDialogVisible"
      title="添加"
      width="500"
      align-center
    >
      <el-form
        ref="addruleFormRef"
        style="max-width: 600px"
        :model="addruleForm"
        status-icon
        label-width="auto"
        class="demo-ruleForm"
        :rules="rules"
      >
        <el-form-item label="分类名" prop="cate_name">
          <el-input
            v-model="addruleForm.cate_name"
            type="text"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item label="所属大类" prop="type">
          <el-select
            v-model="addruleForm.type"
            placeholder="Select"
            size="large"
            style="width: 240px"
          >
            <el-option
              v-for="item in bigCateList"
              :key="item.id"
              :label="item.bigcate_name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="centerDialogVisible = false">Cancel</el-button>
          <el-button type="primary" @click="comfirmAdd(addruleFormRef)">
            Confirm
          </el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 编辑 -->
    <el-dialog
      v-model="editcenterDialogVisible"
      title="编辑"
      width="500"
      align-center
    >
      <el-form
        ref="editruleFormRef"
        style="max-width: 600px"
        :model="editruleForm"
        status-icon
        label-width="auto"
        class="demo-ruleForm"
        :rules="rules"
      >
        <el-form-item label="分类名" prop="cate_name">
          <el-input
            v-model="editruleForm.cate_name"
            type="text"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item label="所属大类" prop="type">
          <el-select
            v-model="editruleForm.type"
            placeholder="Select"
            size="large"
            style="width: 240px"
          >
            <el-option
              v-for="item in bigCateList"
              :key="item.id"
              :label="item.bigcate_name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="editcenterDialogVisible = false">Cancel</el-button>
          <el-button type="primary" @click="confirmEdit(editruleFormRef)">
            Confirm
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import {
  reqCategoryList,
  reqBigCategoryList,
  reqCategoryAdd,
  reqCategoryEdit,
  reqCategoryDel,
} from "@/api/category/index";
import { ResCategoryList, ResBigCategoryList } from "@/api/category/model";
import { FormInstance, FormRules } from "element-plus";
const centerDialogVisible = ref<boolean>(false);
const editcenterDialogVisible = ref<boolean>(false);
const page = ref<number>(1);
const pageSize = ref<number>(10);
const tableData = ref<ResCategoryList[]>([]);
const total = ref<number>(0);
const addruleForm = ref({ cate_name: "", type: "" });
const editruleForm = ref({ id: 0, cate_name: "", type: 0 });
const addruleFormRef = ref<FormInstance>();
const editruleFormRef = ref<FormInstance>();
const bigCateList = ref<ResBigCategoryList[]>([]);

const rules = ref<FormRules<typeof addruleForm>>({
  cate_name: [{ required: true, trigger: "blur", message: "请输入账号" }],
  type: [{ required: true, trigger: "change", message: "请选择角色" }],
});

const openedit = (row: any) => {
  editruleForm.value.id = row.id;
  editruleForm.value.cate_name = row.cate_name;
  editruleForm.value.type = row.type;
  editcenterDialogVisible.value = true;
};
const confirmEdit = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate(async (valid) => {
    if (valid) {
      await reqCategoryEdit(editruleForm.value);
      ElMessage({
        message: "编辑成功",
        type: "success",
      });
      editcenterDialogVisible.value = false;
      getCategoryList();
    } else {
      console.log("error submit!");
    }
  });
};

const delCategory = (row: any) => {
  ElMessageBox.confirm(
    `你确定要删除“${row.cate_name}”分类吗?,可能会对剧本信息有影响，请谨慎删除`,
    "Warning",
    {
      type: "warning",
    }
  )
    .then(async () => {
      await reqCategoryDel(row.id);
      ElMessage({
        message: "删除成功",
        type: "success",
      });
      getCategoryList();
    })
    .catch(() => {});
};

// 分页
const changePage = (pageNum: number) => {
  page.value = pageNum;
  getCategoryList();
};

const addCategory = () => {
  centerDialogVisible.value = true;
};

const comfirmAdd = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate(async (valid) => {
    if (valid) {
      await reqCategoryAdd(addruleForm.value);
      ElMessage({
        message: "添加成功",
        type: "success",
      });
      centerDialogVisible.value = false;
      getCategoryList();
    } else {
      console.log("error submit!");
    }
  });
};

// 获取大分类列表
const getBigCategoryList = async () => {
  let result = await reqBigCategoryList();
  bigCateList.value = result;
};

// 获取分类列表
const getCategoryList = async () => {
  let result = await reqCategoryList({
    page: page.value,
    pageSize: pageSize.value,
  });

  tableData.value = result.rows;
  total.value = result.count;
};

onMounted(() => {
  getCategoryList();
  getBigCategoryList();
});
</script>

<style scoped lang="scss"></style>
